import React, { useState, useEffect, useCallback } from 'react';
import { Modal, Button, Select, Tag } from 'antd';

import styles from './index.less';

import { DeleteOutlined } from '@ant-design/icons';
import { SpecialData } from '@/pages/features/userPermission/user/add/types/interface';

interface DataCardProps {
  dataSource: SpecialData;
  formDisabled: boolean | undefined;
  editHandle: (data: object) => void;
  removeHandleCallback: (key: string | number, item: SpecialData) => void;
}

const DataCard: React.FC<DataCardProps> = (props) => {
  const {
    dataSource: { id, name, labelValues },
    formDisabled,
    editHandle,
    removeHandleCallback,
  } = props;
  return (
    <div className={styles.container}>
      <div>
        <div className={styles.header}>
          <div>{name}</div>
          <div>
            {!formDisabled && (
              <a
                onClick={() => {
                  removeHandleCallback(id, props.dataSource);
                }}
              >
                <DeleteOutlined />删除
              </a>
            )}
          </div>
        </div>
        <div className={styles.tagContainer}>
          {labelValues.map((item) => {
            if (item.selected) {
              return <Tag key={item.id}>{item.name}</Tag>;
            }
          })}
        </div>
      </div>
      <div className={styles.footer}>
        <Button
          disabled={formDisabled}
          onClick={() => {
            editHandle(props.dataSource);
          }}
        >
          编辑
        </Button>
      </div>
    </div>
  );
};

export default DataCard;
